import './index.scss'
/**
 * 创建新组件之后，在all-can-use-components中添加
 * 必须应用 microCreateMinis
 * 数据必须以formData包含
 * */
import { microCreateMinis } from '../../minis'
import draggable from 'vuedraggable';
import {groupBroadcastRoomsList, broadcastRoomsList, liveSourceList} from '@/api/shoppingMall/broad_casting';

/** 头部配置*/
export default {
  name: 'micro-broadcast-ad-box',
  mixins: [microCreateMinis],
  props: {},
  components: {
    draggable,
    chooseLiveGroups: () => import('./components/chooseLiveGroups.vue')
  },
  data() {
    return {
      // broadcastData:[{desc:'hfkahfkfhdfaf'}, {desc:'hfkahfkfhdfaf'}, {desc:'hfkahfkfhdfaf'}, {desc:'hfkahfkfhdfaf'},{desc:'hfkahfkfhdfaf'}],
      tabActive: '0',
      tabList: [
        {
          icon: 'el-icon-bank-card',
          title: '一行一个'
        },
        {
          icon: 'el-icon-bank-card',
          title: '一行两个'
        }
      ],
      dataList:[ // 请求回来的直播源分组数据列表
        // {name: '分组一',children:[{name: '直播一', id: 0},{name: '直播二', id: 1}]},
        // {name: '分组二',children:[{name: '直播鞋子', id: 2},{name: '直播衣服', id: 3}]},
        // {name: '分组三',children:[{name: '直播玩儿的', id: 4},{name: '直播吃的', id: 5}]},
      ],
      hasCheckboxGroup: [], // 已选择的直播间列表id集合
      // rightData: [], // 分组对应的直播间数据列表
      oldData: [
        {
          imgUrl:require('../../../../../../../assets/micro-page/def.png'),
          // imgUrl: 'http://file-sit.ibeeking.com/2022/04/15/1649995035852_头图1.png?1650421965491',
          roomName:'直播间名称1',
          remark:'直播间摘要', // 描述
          anchorName:'主播名称1',
          seeNum:'11', // 观看量
          likeNum:'22', // 点赞数
          commentNum:'22', // 评论数
          forecastName:'未开始', // 预告标签
          groupName:'分组信息', // 分组
          isChose: 1,
        },
        {
          imgUrl:require('../../../../../../../assets/micro-page/def.png'),
          // imgUrl: 'http://file-sit.ibeeking.com/2022/04/15/樊登主图1_1649995744895.jpg?1650421965511',
          roomName:'直播间名称2',
          remark:'直播间摘要', // 描述
          anchorName:'主播名称2',
          seeNum:'11',
          likeNum:'22',
          commentNum:'22',
          forecastName:'直播中', // 预告标签
          groupName:'热卖',
          isChose: 1,
        },
      ],
      formData: {
        title: '直播推荐',
        indicator:1,
        source:1, // 直播来源
        style:1, // 样式
        isName:true, // 直播间名称
        isAbstract:true, // 摘要
        isAnchor:true, // 主播名称
        isRead:true, // 观看人数
        isHelp:true, // 点赞数
        isComment:false, // 评论数
        isForecast:true, // 预告标签
        isGroup:true, // 分组标签
        textColor:'#333', // 文字颜色
        bgColor:'#fff', // 背景颜色
        margins:0,// 页边距
        marginTop:0,// 上边距
        marginBottom:0,// 下边距
        broadcastList:[ // 直播源的数据
          {
            imgUrl:require('../../../../../../../assets/micro-page/def.png'),
            // imgUrl: 'http://file-sit.ibeeking.com/2022/04/15/1649995035852_头图1.png?1650421965491',
            roomName:'直播间名称1',
            remark:'直播间摘要', // 描述
            anchorName:'主播名称1',
            seeNum:'11', // 观看量
            likeNum:'22', // 点赞数
            commentNum:'22', // 评论数
            forecastName:'未开始', // 预告标签
            groupName:'分组信息', // 分组
            isChose: 1,
          },
          {
            imgUrl:require('../../../../../../../assets/micro-page/def.png'),
            // imgUrl: 'http://file-sit.ibeeking.com/2022/04/15/樊登主图1_1649995744895.jpg?1650421965511',
            roomName:'直播间名称2',
            remark:'直播间摘要', // 描述
            anchorName:'主播名称2',
            seeNum:'11',
            likeNum:'22',
            commentNum:'22',
            forecastName:'直播中', // 预告标签
            groupName:'热卖',
            isChose: 1,
          },
        ],
      },
      source: 1, // 直播来源
      
    liveDialogIsShow: false, // 选择直播源-弹框显隐
    
    }
  },
  watch: {
    // 监听添加方式
    'source'(value) {
      this.formData.source = value
      if(value === 2) { // 自动添加，默认取前十条直播源数据
        // console.log('this.formData.broadcastList ==== >', this.formData.broadcastList)
        console.log('this.dataList===>', this.dataList)
        
        let num = 1
        let arr = []

        for(let k in this.dataList) {
          if(this.dataList[k]) {
            this.dataList[k].forEach((ele, index) => {
              if(num <= 10) {
                num = num + 1
                arr.push(ele)
              } else {
                return false
              }
            })
          }
        }
        console.log('arr===>', arr)
        
        // this.formData.broadcastList = this.dataList.lenght >=9 ? this.dataList.slice(0, 10) : this.dataList
        this.formData.broadcastList = arr

      } else {
        // this.formData.broadcastList = old
      }
    },

    'formData.broadcastList'(value) {
      if(this.formData.broadcastList.length == 0) {
        console.log('this.formData.broadcastList==>', value)
        this.formData.broadcastList = this.oldData
      }
    }
  },
  computed: {
    theme() {
      return this.$store.getters.theme
    }
  },
  created() {
    this.getGroupBroadcastRoomsList()

  },
  mounted() {
    // if(this.formData.broadcastList && this.formData.broadcastList.lenght != 0) {
    //   this.formData.broadcastList.map(item => {
    //     if(item.id) {
    //       this.hasCheckboxGroup.push(item.id)
    //     }
    //   })
    // }
  },
  methods: {
    // 获取直播间分组列表数据
    async getGroupBroadcastRoomsList() {
      // groupBroadcastRoomsList().then( res => {
      //   this.dataList = res.data
      //   broadcastRoomsList({groupId: this.dataList[0].id}).then(res => {
      //     if(res.data&&res.data.length) {
      //         this.rightData = res.data
      //     }else {
      //       this.rightData = [];
      //     }
      //   })
      // })

      
      liveSourceList().then(res => {
        console.log('res======>', res)
        this.dataList = res.data
      })
    },

    


    // 添加直播源按钮
    addBroadcast(){
      this.hasCheckboxGroup = []
      if(this.formData.broadcastList && this.formData.broadcastList.lenght != 0) {
        this.formData.broadcastList.map(item => {
          if(item.id) {
            this.hasCheckboxGroup.push(item.id)
          }
        })
      }
      this.liveDialogIsShow = true
    },

    // 确认选择的直播源数据
    finish(data) {
      if(data.length > 10) {
        this.$message({
          message: '做多可选10条',
          type: 'warning'
        });
      } else {
        this.formData.broadcastList = []
        this.formData.broadcastList = this.formData.broadcastList.concat(data)
        console.log('直播源数据this.formData.broadcastList===>', this.formData.broadcastList)
        this.liveDialogIsShow = false
      }
      

      
    },
    close() {
      // 取消弹框
      this.liveDialogIsShow = false
    },

    closeCoupon(index) {
      this.formData.broadcastList.splice(index, 1)
    },
    /**
     * 开始验证
     * */
    checkData() {
      this.myCheckResult(true)
    },
    /** 弹窗*/
    mySelfCheckFun() { // 可以选择调用默认规则判断
    }
  }
}
